<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{&quot;hostname&quot;:&quot;www.nilstorm.com&quot;,&quot;root&quot;:&quot;&#x2F;&quot;,&quot;images&quot;:&quot;&#x2F;images&quot;,&quot;scheme&quot;:&quot;Gemini&quot;,&quot;version&quot;:&quot;8.5.0&quot;,&quot;exturl&quot;:false,&quot;sidebar&quot;:{&quot;position&quot;:&quot;left&quot;,&quot;display&quot;:&quot;post&quot;,&quot;padding&quot;:18,&quot;offset&quot;:12},&quot;copycode&quot;:false,&quot;bookmark&quot;:{&quot;enable&quot;:false,&quot;color&quot;:&quot;#222&quot;,&quot;save&quot;:&quot;auto&quot;},&quot;fancybox&quot;:false,&quot;mediumzoom&quot;:false,&quot;lazyload&quot;:false,&quot;pangu&quot;:false,&quot;comments&quot;:{&quot;style&quot;:&quot;tabs&quot;,&quot;active&quot;:null,&quot;storage&quot;:true,&quot;lazyload&quot;:false,&quot;nav&quot;:null},&quot;motion&quot;:{&quot;enable&quot;:true,&quot;async&quot;:false,&quot;transition&quot;:{&quot;post_block&quot;:&quot;fadeIn&quot;,&quot;post_header&quot;:&quot;fadeInDown&quot;,&quot;post_body&quot;:&quot;fadeInDown&quot;,&quot;coll_header&quot;:&quot;fadeInLeft&quot;,&quot;sidebar&quot;:&quot;fadeInUp&quot;}},&quot;prism&quot;:false,&quot;i18n&quot;:{&quot;placeholder&quot;:&quot;Searching...&quot;,&quot;empty&quot;:&quot;We didn&#39;t find any results for the search: ${query}&quot;,&quot;hits_time&quot;:&quot;${hits} results found in ${time} ms&quot;,&quot;hits&quot;:&quot;${hits} results found&quot;}}</script><script src="/js/config.js"></script>
<meta name="description" content="从问题出发且不论游戏引擎这样的庞然巨物，就只说渲染引擎所需要涉及的内容就非常，你可能要考虑怎么去封装渲染API，还要考虑怎么去整合各类效果系统，初版效果出来了，要不要考虑搞搞Vulkan搞搞Metal，什么样的方案才是最佳的等等。 因此如果没有一个方向就开始寻找资料的话和大海捞针没有什么区别，也容易因为一时间接收的资讯过多进而打击信心和兴趣，因此在开始找资料之前我给自己定了几个问题，以这个几个问题">
<meta property="og:type" content="article">
<meta property="og:title" content="跨平台渲染引擎之路：拨云见日">
<meta property="og:url" content="http://www.nilstorm.com/2020/cf6289c2.html">
<meta property="og:site_name" content="Lam&#39;s Blog">
<meta property="og:description" content="从问题出发且不论游戏引擎这样的庞然巨物，就只说渲染引擎所需要涉及的内容就非常，你可能要考虑怎么去封装渲染API，还要考虑怎么去整合各类效果系统，初版效果出来了，要不要考虑搞搞Vulkan搞搞Metal，什么样的方案才是最佳的等等。 因此如果没有一个方向就开始寻找资料的话和大海捞针没有什么区别，也容易因为一时间接收的资讯过多进而打击信心和兴趣，因此在开始找资料之前我给自己定了几个问题，以这个几个问题">
<meta property="og:locale">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3e2bbdff?w=1372&amp;h=342&amp;f=jpeg&amp;s=68760">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3e18a063?w=1362&amp;h=1018&amp;f=jpeg&amp;s=285845">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3f9bd02b?w=1982&amp;h=1022&amp;f=jpeg&amp;s=129340">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3f8e9248?w=2322&amp;h=898&amp;f=jpeg&amp;s=145884">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb4034e71f?w=1274&amp;h=902&amp;f=jpeg&amp;s=48096">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb4040dd8f?w=470&amp;h=302&amp;f=jpeg&amp;s=15160">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb72ae684e?w=2012&amp;h=758&amp;f=jpeg&amp;s=132751">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb79aa3101?w=1842&amp;h=714&amp;f=jpeg&amp;s=41480">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb7d5bea1f?w=1998&amp;h=744&amp;f=jpeg&amp;s=48108">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb87bda9dc?w=1880&amp;h=782&amp;f=jpeg&amp;s=82171">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb8c9f400e?w=1902&amp;h=780&amp;f=jpeg&amp;s=105360">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb8bbe602a?w=1926&amp;h=814&amp;f=jpeg&amp;s=119366">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658ebb2966499?w=1938&amp;h=310&amp;f=jpeg&amp;s=54103">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658ebbb04f741?w=1440&amp;h=1080&amp;f=jpeg&amp;s=262214">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658ebc5370f99?w=1440&amp;h=1080&amp;f=jpeg&amp;s=239322">
<meta property="og:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658ebc6294411?w=1436&amp;h=690&amp;f=jpeg&amp;s=136905">
<meta property="og:image" content="https://tva1.sinaimg.cn/large/007S8ZIlgy1gee6wkfo69j30e9026gm4.jpg">
<meta property="article:published_time" content="2020-05-01T05:00:00.000Z">
<meta property="article:modified_time" content="2021-06-06T08:08:18.177Z">
<meta property="article:author" content="LinBinghe">
<meta property="article:tag" content="跨平台">
<meta property="article:tag" content="渲染引擎">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3e2bbdff?w=1372&amp;h=342&amp;f=jpeg&amp;s=68760">


<link rel="canonical" href="http://www.nilstorm.com/2020/cf6289c2.html">



<script class="next-config" data-name="page" type="application/json">{&quot;sidebar&quot;:&quot;&quot;,&quot;isHome&quot;:false,&quot;isPost&quot;:true,&quot;lang&quot;:&quot;zh-Hans&quot;,&quot;comments&quot;:true,&quot;permalink&quot;:&quot;http:&#x2F;&#x2F;www.nilstorm.com&#x2F;2020&#x2F;cf6289c2.html&quot;,&quot;path&quot;:&quot;2020&#x2F;cf6289c2.html&quot;,&quot;title&quot;:&quot;跨平台渲染引擎之路：拨云见日&quot;}</script>

<script class="next-config" data-name="calendar" type="application/json">&quot;&quot;</script>
<title>跨平台渲染引擎之路：拨云见日 | Lam's Blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<link rel="alternate" href="/atom.xml" title="Lam's Blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Lam's Blog</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">Knowledge as Action</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BB%8E%E9%97%AE%E9%A2%98%E5%87%BA%E5%8F%91"><span class="nav-number">1.</span> <span class="nav-text">从问题出发</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%AF%E7%A8%8B"><span class="nav-number">2.</span> <span class="nav-text">启程</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E%E7%9A%84%E6%8A%80%E8%83%BD%E6%A0%91"><span class="nav-number">3.</span> <span class="nav-text">渲染引擎的技能树</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3D%E5%BC%95%E6%93%8E%E7%9D%80%E8%89%B2%E6%96%B9%E5%BC%8F%E7%9A%84%E6%BC%94%E5%8C%96%E5%8F%B2"><span class="nav-number">4.</span> <span class="nav-text">3D引擎着色方式的演化史</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Rendering-Path"><span class="nav-number">4.1.</span> <span class="nav-text">Rendering Path</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Forward-rendering"><span class="nav-number">4.2.</span> <span class="nav-text">Forward rendering</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Deferred-rendering"><span class="nav-number">4.3.</span> <span class="nav-text">Deferred rendering</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Light-Pre-Pass-Deferred-Lighting"><span class="nav-number">4.3.1.</span> <span class="nav-text">Light Pre-Pass &#x2F; Deferred Lighting</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Tile-based-deferred-rendering"><span class="nav-number">4.3.2.</span> <span class="nav-text">Tile-based deferred rendering</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Hybrid-deferred-rendering"><span class="nav-number">4.3.3.</span> <span class="nav-text">Hybrid deferred rendering</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Forward"><span class="nav-number">4.4.</span> <span class="nav-text">Forward+</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%B8%B2%E6%9F%93-%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E%E8%B0%83%E6%9F%A5"><span class="nav-number">5.</span> <span class="nav-text">渲染&#x2F;游戏引擎调查</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E"><span class="nav-number">5.1.</span> <span class="nav-text">渲染引擎</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E"><span class="nav-number">5.2.</span> <span class="nav-text">游戏引擎</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E5%BC%95%E6%93%8E"><span class="nav-number">6.</span> <span class="nav-text">参考引擎</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">7.</span> <span class="nav-text">总结</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="LinBinghe"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">LinBinghe</p>
  <div class="site-description" itemprop="description">Knowledge as Action</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">13</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">60</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/LinBinghe" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;LinBinghe" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.zhihu.com/people/shawn_lam" title="Zhihu → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;shawn_lam" rel="noopener" target="_blank"><i class="fab fa-zhihu fa-fw"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:linbinghe@gmail.com" title="E-Mail → mailto:linbinghe@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i></a>
      </span>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-Hans">
    <link itemprop="mainEntityOfPage" href="http://www.nilstorm.com/2020/cf6289c2.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="LinBinghe">
      <meta itemprop="description" content="Knowledge as Action">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lam's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          跨平台渲染引擎之路：拨云见日
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-05-01 13:00:00" itemprop="dateCreated datePublished" datetime="2020-05-01T13:00:00+08:00">2020-05-01</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-06-06 16:08:18" itemprop="dateModified" datetime="2021-06-06T16:08:18+08:00">2021-06-06</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E/" itemprop="url" rel="index"><span itemprop="name">渲染引擎</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="从问题出发"><a href="#从问题出发" class="headerlink" title="从问题出发"></a>从问题出发</h1><p>且不论游戏引擎这样的庞然巨物，就只说渲染引擎所需要涉及的内容就非常，你可能要考虑怎么去封装渲染API，还要考虑怎么去整合各类效果系统，初版效果出来了，要不要考虑搞搞Vulkan搞搞Metal，什么样的方案才是最佳的等等。</p>
<p>因此如果没有一个方向就开始寻找资料的话和大海捞针没有什么区别，也容易因为一时间接收的资讯过多进而打击信心和兴趣，因此在开始找资料之前我给自己定了几个问题，以这个几个问题为方向去找资料为自己解答：</p>
<ul>
<li>一个渲染引擎是由哪些系统组成的？这些系统都是不可或缺的吗？</li>
<li>实现一个渲染引擎需要点亮哪些技能点？哪些是必须技？哪些可以边做边点亮？</li>
<li>渲染引擎的基本渲染流程是什么样的？</li>
<li>目前有哪些出色的渲染引擎？怎么筛选参考引擎？参考哪些？</li>
</ul>
<p>而在寻找答案的过程中，自然而然就也会接触到其他方面的内容，比如一些自己之前见都没见过的名词，或者是大多数引擎都在用的成熟方案等等，这些也都会一并记录下来。<br><span id="more"></span></p>
<h1 id="启程"><a href="#启程" class="headerlink" title="启程"></a>启程</h1><p>其实这篇文章是有一个检验收获的方式的，这个方式在一开始是没有的，但是在找资料的过程中看到<a target="_blank" rel="noopener" href="https://www.zhihu.com/question/36049881/answer/68854724">知乎大佬的回答</a>有所感悟，在这篇文章结束时再回过头来看看下面这句话，如果大致明白了，那么这篇文章就起到作用了：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3e2bbdff?w=1372&amp;h=342&amp;f=jpeg&amp;s=68760" alt="渲染流程概要"></p>
<p>而这段话正是这一轮资料搜寻下来个人觉得最精炼的对渲染流程的描述了，至于里面具体各个名词所指则会在后面的内容进行补充，当然各个渲染引擎的流程在细节之处甚至一些环节上都会做出有所区别，这些则会在后面针对一些参考引擎做分析的时候再逐步整理出来。</p>
<h1 id="渲染引擎的技能树"><a href="#渲染引擎的技能树" class="headerlink" title="渲染引擎的技能树"></a>渲染引擎的技能树</h1><p>先贴一下找到的 <a target="_blank" rel="noopener" href="https://www.zhihu.com/question/30358698/answer/48219929">知乎上的回答</a> ：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3e18a063?w=1362&amp;h=1018&amp;f=jpeg&amp;s=285845" alt="你需要具备的技能"></p>
<p>是不是有种看一眼就想放弃的冲动 ？(╯°Д°)╯︵ ┻━┻</p>
<p>但是正如我们在日常开发中突然遇到一个新的技术需求的时候一样，一般我们也不会把一个技术学到精通来才开始落地，而是会先预研一下方案，做下对比，掌握好基础，对一些风险提前做好功课，保证好大方向上的正确性，然后就会开始逐步落地，在过程中慢慢打磨。</p>
<p>类比到上面的内容也是如此，按照我自己的想法，我觉得首先C++的基本语法、内存管理、标准库的使用等基础内容以及OpenGL的渲染管线和基本的glsl、矩阵这些是在开始之前必须要先打好底子的，否则可能会连参考第三方开源引擎都成问题，更不要说自己去写了，而在自己写项目或学习第三方开源项目的过程中则可以对遇到的不明白或者不完全理解的内容进行进一步的学习，不求快但求吃透每一点，以这样的方式去持续扩大或加深自己的技能，在这个过程中尽量以点及面，每一个细节尽可能多去了解一些边边角角涉及到的地方，以便自己能够尽快完成一个又一个的闭环，最终对整个领域的理解越来越清晰。</p>
<p>其次就是合理安排出一部分时间来进行理论方面的系统学习，比如计算机图形学等，系统性的学习个人还是比较推荐通过书籍来进行，虽然周期更长，但是可以让你对这个领域的方方面面能够有一个更清晰的认识，从而形成一个更大的闭环。</p>
<p>而至于dx、metal、编译知识这些如果暂时不需要做这方面的需求的话倒不是非常关键，可以放到上面的技能学习之后，甚至可能很长一段时间你都不会使用到，当然也可能你现在是需要用dx而不需要opengl，那么就是dx的基础知识是必须的opengl排到后面，总之因人而异吧。</p>
<h1 id="3D引擎着色方式的演化史"><a href="#3D引擎着色方式的演化史" class="headerlink" title="3D引擎着色方式的演化史"></a>3D引擎着色方式的演化史</h1><p>这部分内容是我在寻找渲染流程过程中的额外收获，虽然说的是演化史，但是里面的内容正好是对 <code>启程</code> 章节里对渲染引擎主要流程的描述的扩展，通过对多种着色方式的了解，可以间接对渲染流程里的几个主要步骤有一个初步的感知。</p>
<p>该章节的内容起源是<a target="_blank" rel="noopener" href="https://blog.csdn.net/CrazyEngine/article/details/53190923">3D渲染引擎着色方式的演化史</a>，原文对各个着色方式的介绍比较简明扼要，在阅读完这篇文章后我又自己去对里面的各个名词和许多不理解的地方进行了搜索，因此大纲上还是会按照这篇文章的几大部分进行，在内容里面再补上自己找到的额外的资料，主要来源于 <a target="_blank" rel="noopener" href="https://www.cnblogs.com/polobymulberry/p/5126892.html">实时渲染中常用的几种Rendering Path</a> 和其他针对其中细节讲解的文章。</p>
<p>这部分个人认为在这篇文章的阶段不需要深究里面的实现细节，这个可以在后续分析开源引擎流程以及自主实现的时候去深入研究，在这里更多地是对这些<code>Render path</code>有一个印象并且知道他们的大致渲染原理、彼此之间的区别以及能解决什么样的问题，从而能在后面的引擎中因地制宜地使用不同的着色方式。</p>
<h2 id="Rendering-Path"><a href="#Rendering-Path" class="headerlink" title="Rendering Path"></a>Rendering Path</h2><p><code>Rendering Path</code> 其实指的就是渲染场景中光照的方式。由于场景中的光源可能很多，甚至是动态的光源。所以怎么在<em>速度</em>和<em>效果</em>上达到一个最好的结果确实很困难。以当今的显卡发展为契机，人们才衍生出了这么多的 <em>Rendering Path</em> 来处理各种光照。</p>
<p>在介绍各种光照渲染方式之前，首先必须介绍一下现代的图形渲染管线。这是下面提到的几种 <em>Rendering Path</em> 的技术基础。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3f9bd02b?w=1982&amp;h=1022&amp;f=jpeg&amp;s=129340" alt="图形渲染管线"></p>
<p>现代的渲染管线也称为<code>可编程管线（Programmable Pipeline）</code>，简单点 说就是将以前固定管线写死的部分（比如顶点的处理，像素颜色的处理等等）变成在 GPU 上可以进行用户自定义编程的部分，好处就是用户可以自由发挥的空间增大，缺点就是必须用户自己实现很多功能。</p>
<p>下面简单介绍下可编程管线的流程。以 OpenGL 绘制一个三角形举例。首先用户指定三 个顶点传给 <code>Vertex Shader</code>。然后用户可以选择是否进行<code>Tessellation Shader</code>（曲面细分可能会用到）和 <code>Geometry Shader</code>（可以在 GPU 上增删几何信息）。紧接着进行<code>光栅化</code>，再将光栅化后的结果传给 <code>Fragment Shader</code> 进行 <code>pixel</code> 级别的处理。 最后将处理的像素传给 <code>FrameBuffer</code> 并显示到屏幕上。</p>
<blockquote>
<p><strong>名词解释</strong></p>
<p>Geometry：即我们所要渲染的一个几何图形</p>
<p>Vertex Shader：顶点着色器，处理每个顶点，将顶点的空间位置投影在屏幕上，即计算顶点的二维坐标。</p>
<p>Tessellation Shader：曲面细分着色器，是一个可选的着色器，用于细分图元</p>
<p>Geometry Shader：几何着色器，是一个可选的着色器，用于逐图元的着色，可以产生更多的图元</p>
<p>Fragment Shader：片段着色器，也称为像素着色器（Pixel Shader），用于计算“片段”的颜色和其它属性，此处的“片段”通常是指单独的像素</p>
<p><em>后面文章内容中出现的VS、TS、GS、FS（PS）即对应上图中的Vertex Shader、Tessellation Shader、Geometry Shader、Fragment Shader</em></p>
<p>FrameBuffer：帧缓冲存储器，简称帧缓存或显存，它是屏幕所显示画面的一个直接映象，又称为位映射图(Bit Map)或光栅。帧缓存的每一存储单元对应屏幕上的一个像素，整个帧缓存对应一帧图像。</p>
</blockquote>
<h2 id="Forward-rendering"><a href="#Forward-rendering" class="headerlink" title="Forward rendering"></a>Forward rendering</h2><p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb3f8e9248?w=2322&amp;h=898&amp;f=jpeg&amp;s=145884" alt="Forward rendering"></p>
<p>这是最初始的渲染方式，原理是以<code>mesh</code>为单位进行渲染，在光栅化后，对每个<code>PS</code>进行计算时，根据<code>光照</code>进行着色计算，所以这种方式称为<code>前向着色</code>。</p>
<p><em>Forward Rendering</em> 是绝大数引擎都含有的一种渲染方式。要使用 <em>Forward Rendering</em>，一般在 <code>Vertex Shader</code> 或 <code>Fragment Shader</code> 阶段对每个顶点或每个像素进行光照计算，并且是对每个光源进行计算产生最终结果。下面是 Forward Rendering 的核心伪代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">For each light:</span><br><span class="line">    For each object affected by the light:</span><br><span class="line">        framebuffer += object * light</span><br></pre></td></tr></table></figure>
<p>比如在 Unity3D 4.x 引擎中，对于下图中的圆圈（表示一个 <code>Geometry</code>），进行 Forward Rendering 处理：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb4034e71f?w=1274&amp;h=902&amp;f=jpeg&amp;s=48096" alt="Unity3D 4.x 圆圈"></p>
<p>将得到下面的处理结果：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb4040dd8f?w=470&amp;h=302&amp;f=jpeg&amp;s=15160" alt="Unity3D 4.x 圆圈 着色结果"></p>
<p>也就是说，对于 ABCD 四个光源我们在 <em>Fragment Shader</em> 中我们对每个 pixel 处理光照， 对于 DEFG 光源我们在 <em>Vertex Shader</em> 中对每个 vertex 处理光照，而对于 GH 光源，我们采用<em>球调和（SH）函数</em>进行处理。</p>
<p>这种方式存在以下弊端：</p>
<ul>
<li>如果像素被其他像素遮蔽了，就浪费了宝贵的处理结果</li>
<li><strong>光源多起来</strong>后管理很麻烦，Shader也不好写。</li>
</ul>
<p>因此，Deferred rendering就应运而生了。</p>
<blockquote>
<p>很明显，对于 <em>Forward Rendering</em>，光源数量对计算复杂度影响巨大，所以比较适合户外这种光源较少的场景（一般只有太阳光）。</p>
<p>但是对于多光源，我们使用 <em>Forward Rendering</em> 的效率会极其低下。因为如果在 <em>Vertex Shader</em> 中计算光照，其复杂度将是<code>O(num_geometry_vertexes ∗ num_lights)</code>，而如果在 <em>Fragment Shader</em> 中计算光照，其复杂度为<code>O(num_geometry_fragments ∗ num_lights)</code> 。可见<code>光源数目和复杂度是成线性增长的</code>。</p>
<p>对此，我们需要进行必要的优化。比如</p>
<ul>
<li><p><em>多在 Vertex Shader 中进行光照处理</em>，因为有一个几何体有 10000 个顶点，那么对于 n 个光源，至少要在 Vertex Shader 中计算 10000n 次。而对于在 Fragment Shader 中进行处理，这种消耗会更多，因为对于一个普通的 1024x768 屏幕，将近有 8 百万的像素 要处理。所以如果顶点数小于像素个数的话，尽量在 Vertex shader 中进行光照。</p>
</li>
<li><p>如果要在 fragment shader 中处理光照，我们大可<em>不必对每个光源进行计算时，把所有像素都对该光源进行处理一次</em>。因为每个光源都有其自己的作用区域。比如点光源的作用区域是一个球体，而平行光的作用区域就是整个空间了。对于不在此光照作用区域的像素就不进行处理。但是这样做的话，CPU 端的负担将加重。</p>
</li>
<li><p>对于某个几何体，光源对其作用的程度是不同，所以有些作用程度特别小的光源可以不进行考虑。典型的例子就是 Unity 中只考虑重要程度最大的 4 个光源。</p>
</li>
</ul>
<p><strong>名词解释</strong></p>
<p>Mesh：网格，任何一个模型都是由若干网格面组成，而每一个面又有若干个三角形组成，也就是说，模型是由若干个三角形面组成的</p>
</blockquote>
<h2 id="Deferred-rendering"><a href="#Deferred-rendering" class="headerlink" title="Deferred rendering"></a>Deferred rendering</h2><p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb72ae684e?w=2012&amp;h=758&amp;f=jpeg&amp;s=132751" alt="Deferred rendering"></p>
<p>Deferred Rendering（延迟渲染）顾名思义，就是将光照处理这一步骤延迟一段时间再处理。</p>
<p>具体做法就是将光照放在已经将三维物体生成二维图片之后进行处理。也就是说将<code>物空间</code>的光照处理放到了<code>像空间</code>进行处理。要做到这一步，需要一个重要的辅助工具——<code>G-Buffer</code>。</p>
<p> G-Buffer 主要是用来存储每个像素对应的 Position，Normal，Diffuse Color 和其他 <code>Material parameters</code>。根据这些信息，我们就可以在像空间中对每个像素进行光照处理。</p>
<p>下面是 Deferred Rendering 的核心伪代码。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">For each object:</span><br><span class="line">    Render to multiple targets</span><br><span class="line">For each light:</span><br><span class="line">    Apply light as a 2D postprocess</span><br></pre></td></tr></table></figure>
<p>这种渲染方式相比 Forward rendering 就是在渲染<code>mesh</code>时，并<em>不进行光照计算</em>，而是按照以下步骤进行：</p>
<ul>
<li><p>将深度、法线、Diffuse、Specular等<code>材质属性</code>分别输出到<code>GBuffer</code>里（其实就是几张<code>RT</code>）</p>
</li>
<li><p>然后GBuffer里的深度和法线信息，累加所有光照的强度到一张<code>光照强度RT</code>上</p>
</li>
<li><p>根据GBuffer里的Diffuse和Specular信息，以及光照强度RT，进行着色计算</p>
</li>
</ul>
<blockquote>
<p><strong>名词解释</strong></p>
<p>GBuffer：指Geometry Buffer，亦即“物体缓冲”。区别于普通的仅将颜色渲染到纹理中，G-Buffer指包含颜色、法线、世界空间坐标的缓冲区，亦即指包含颜色、法线、世界空间坐标的纹理。由于G-Buffer需要的向量长度超出通常纹理能包含的向量的长度，通常在游戏开发中，使用多渲染目标技术来生成G-Buffer，即在一次绘制中将颜色、法线、世界空间坐标分别渲染到三张浮点纹理中</p>
</blockquote>
<p>下面简单举个例子：</p>
<p>首先我们用存储各种信息的纹理图。比如下面这张 <code>Depth Buffer</code>，主要是用来确定该像 素距离视点的远近的。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb79aa3101?w=1842&amp;h=714&amp;f=jpeg&amp;s=41480" alt="Depth Buffer"></p>
<p>根据反射光的密度/强度分度图来计算反射效果。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb7d5bea1f?w=1998&amp;h=744&amp;f=jpeg&amp;s=48108" alt="Specular Intensity/Power"></p>
<p>下图表示法向数据，这个很关键。进行光照计算最重要的一组数据。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb87bda9dc?w=1880&amp;h=782&amp;f=jpeg&amp;s=82171" alt="Normal Buffer"></p>
<p>下图使用了 Diffuse Color Buffer。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb8c9f400e?w=1902&amp;h=780&amp;f=jpeg&amp;s=105360" alt="Diffuse Color Buffer"></p>
<p>这是使用 Deferred Rendering 最终的结果。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658eb8bbe602a?w=1926&amp;h=814&amp;f=jpeg&amp;s=119366" alt="Deferred Lighting Results"></p>
<p><em>Deferred rendering</em> 的最大的优势就是将光源的数目和场景中物体的数目在复杂度层面上完全分开，也就是说场景中不管是一个三角形还是一百万个三角形，最后的复杂度不会随光源数目变化而产生巨大变化。从上面的伪代码可以看出 <em>Deferred rendering</em> 的复杂度为 <code>O(screen_resolution + num_lights)</code>。</p>
<p>这种渲染方式也有一些弊端：</p>
<ul>
<li>由于硬件限制或者性能限制，GBuffer里保存的材质信息有限，对于特殊材质来说，例如人的皮肤、翡翠等，渲染结果很不好</li>
<li>延迟计算光照会大幅增加纹理带宽和帧缓冲区带宽的开销</li>
<li>当光源数量很多时，光源会不断对光照强度RT进行累加，也会大幅增加帧缓冲区带宽开销</li>
<li>由于硬件限制或者性能限制，不能使用硬件支持的MSAA，只能使用类似后期处理的FXAA或者Temporal AA</li>
</ul>
<blockquote>
<p><strong>名词解释</strong></p>
<p>MSAA、FXAA、Temporal AA都是抗锯齿（Anti-Aliasing）技术，锯齿的来源是因为场景的定义在三维空间中是连续的，而最终显示的像素则是一个离散的二维数组。所以判断一个点到底没有被某个像素覆盖的时候单纯是一个“有”或者“没有”问题，丢失了连续性的信息，导致锯齿。</p>
<p>具体区别可见<a target="_blank" rel="noopener" href="https://www.zhihu.com/question/20236638/answer/44821615">FXAA、FSAA与MSAA有什么区别？</a></p>
</blockquote>
<p>Deferred Rendering 局限性是显而易见的。比如我在 G-Buffer 存储以下数据：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658ebb2966499?w=1938&amp;h=310&amp;f=jpeg&amp;s=54103" alt="G-Buffer 数据格式"></p>
<p>这样的话，对于一个普通的 1024x768 的屏幕分辨率。总共得使用 <em>1024x768x128bit=20MB</em>， 对于目前的动则上 GB 的显卡内存可能不算什么，但是使用 G-Buffer 耗费的显存还是很多的。一方面，对于低端显卡，这么大的显卡内存确实很耗费资源；另一方面，如果要渲染更酷的特效，使用的 G-Buffer 大小将增加，并且其增加的幅度也是很可观的；并且存取 G-Buffer 耗费的带宽也是一个不可忽视的缺陷。</p>
<p>对于 Deferred Rendering 的优化也是一个很有挑战的问题。 下面简单介绍几种降低 Deferred Rendering 存取带宽的方式。最简单也是最容易想到的就是将存取的 G-Buffer 数据结构最小化，这也就衍生除了 <code>Light Pre-Pass</code> 方法。另一种方式是将多个光照组成一组，然后一起处理，这种方法衍生了 <code>Tile-based deferred Rendering</code>。</p>
<h3 id="Light-Pre-Pass-Deferred-Lighting"><a href="#Light-Pre-Pass-Deferred-Lighting" class="headerlink" title="Light Pre-Pass / Deferred Lighting"></a>Light Pre-Pass / Deferred Lighting</h3><p>这个技术是CryTek这个团队（该团队开发了CryENGINE游戏引擎，即下面简称的CE，如果还不熟悉的话，那么这个团队开发了《孤岛危机》、《孤岛惊魂》等游戏）原创的，由 Wolfgang Engel 在他的 <a target="_blank" rel="noopener" href="http://diaryofagraphicsprogrammer.blogspot.com/2008/03/light-pre-pass-renderer.html">博客</a> 中提到的，也用于解决<code>Deferred rendering</code>渲染方式里的<strong>第一个弊端</strong>。原理跟<code>Deferred rendering</code>差不多，只是有几处不同：</p>
<ul>
<li>GBuffer中<em>只有深度（Z）和法线（Normal）数据</em>，对比 <em>Deferred Rendering</em>，少了 Diffuse Color， Specular Color 以及对应位置的材质索引值</li>
<li><p>在 FS 阶段利用上面的 G-Buffer 计算出所必须的 Light properties，比如 Normal * LightDir, LightColor, Specular 等 Light properties，将这些计算出的光照进行 <code>alpha-blend</code> 并存入 <code>LightBuffer</code>（就是用来存储 Light properties 的 buffer）</p>
</li>
<li><p>着色过程不是<em>Deferred rendering</em>中类似于后处理的方式，而是渲染<em>mesh</em>，即将结果送到 <em>Forward rendering</em> 渲染方式计算最后的光照效果</p>
</li>
</ul>
<p>相对于传统的 <em>Deferred Render</em>，使用 Light Pre-Pass 可以对每个不同的几何体使用不同 的 Shader 进行渲染，所以每个物体的 Material properties 将有更多变化。这里我们可以看出对于传统的 Deferred Rendering，它的第二步是遍历每个光源，这样就增加了光源设置的灵活性，而 Light Pre-Pass 第三步使用的其实是 <em>Forward rendering</em>，所以可以对每个 <em>mesh</em> 设置其材质，这两者是相辅相成的，有利有弊。</p>
<p>另一个 Light Pre-Pass 的优点是在使用 MSAA 上很有利。虽然并不是 100%使用上了 MSAA（除非使用 DX10/11 的特性），但是由于使用了 Z 值和 Normal 值，就可以很容易找到边缘，并进行采样。</p>
<p>下面这两张图，上边是使用传统 Deferred Render 绘制的，下边是使用 Light Pre-Pass 绘 制的。这两张图在效果上不应该有太大区别。</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658ebbb04f741?w=1440&amp;h=1080&amp;f=jpeg&amp;s=262214" alt="Deferred Renderer Result"></p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658ebc5370f99?w=1440&amp;h=1080&amp;f=jpeg&amp;s=239322" alt="Light Pre-Pass Result"></p>
<p>其实这种方式也有弊端：</p>
<ul>
<li><p>由于不透明物体在主视口中被渲染了两次，会大幅增加渲染批次，不过好在CE对状态切换管理的非常好，所以渲染批次的承载力很高</p>
</li>
<li><p>由于某些特殊材质需要对光照进行特殊处理，比如说树叶的背光面也会有一定的光照，所以这种方式也不太完美</p>
</li>
</ul>
<blockquote>
<p>印象里貌似CE对主光，例如太阳光，不累加进光照强度RT，而是着色时单独处理，这样的话效果会提升不少，至少室外场景是完全能够解决问题的；而对于点光源比较多的室内场景，主光着色好看了就会效果很好了，毕竟其他光照的影响占比比较小。</p>
</blockquote>
<h3 id="Tile-based-deferred-rendering"><a href="#Tile-based-deferred-rendering" class="headerlink" title="Tile-based deferred rendering"></a>Tile-based deferred rendering</h3><p>这个方案是对<code>Deferred rendering</code>渲染方式里的<strong>第三个弊端</strong>进行优化的。原理就是：</p>
<ul>
<li>先将整个光照强度RT分成很多个正方形区域，计算每个区域受哪些光源影响，并保存起来</li>
<li>然后以每个区域为单位，在一个批次里累加所有的光照</li>
</ul>
<p>这样就能减少对光照强度RT上某个像素频繁读写的次数。</p>
<p>TBDR 主要思想就是将屏幕分成一个个小块 <code>tile</code>，然后根据这些 Depth 求得每个 tile 的 <code>bounding box</code>。对每个 tile 的 bounding box 和 light 进行求交，这样就得到了对该 tile 有作用 的 light 的序列。最后根据得到的序列计算所在 tile 的光照效果。</p>
<p>对比 <em>Deferred Render</em>，之前是对每个光源求取其作用区域 <code>light volume</code>，然后决定其作用的的 pixel，也就是说每个光源要求取一次。而使用 TBDR，只要遍历每个 pixel，让其所属 tile 与光线求交，来计算作用其上的 light，并利用 G-Buffer 进行 Shading。一方面这样做减少 了所需考虑的光源个数，另一方面与传统的 Deferred Rendering 相比，减少了存取的带宽。</p>
<p>在 <a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/26279464">一篇文章</a> 中提到目前所有的移动设备都使用的是 Tile-Based Deferred Rendering(TBDR) 的渲染架构，，里面还提及了使用TBDR的一些注意事项，感兴趣的可以看看，以及 <a target="_blank" rel="noopener" href="https://blog.csdn.net/leonwei/article/details/79298381">针对移动端TBDR架构GPU特性的渲染优化</a> ，<a target="_blank" rel="noopener" href="https://www.expreview.com/24705-3.html">移动GPU渲染原理的流派——IMR、TBR及TBDR</a></p>
<blockquote>
<p><strong>名词解释</strong></p>
<p>tile：区块，即将需要渲染的画面分成一个个的区块</p>
<p>bounding box：边界框，是一个矩形框，可以由矩形左上角的xx和yy轴坐标与右下角的xx和yy轴坐标确定。从技术上讲，边界框是包含一个物体的最小矩形</p>
<p>light volume：体积光，散射是一种非常美丽的自然现象，在自然界中光穿过潮湿或者含有杂质的介质时产生散射，散射的光线进入人眼，让这些介质看起来像拢住了光线一样，也就是所谓的体积光。可见 <a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/21425792">游戏开发相关实时渲染技术之体积光</a></p>
</blockquote>
<h3 id="Hybrid-deferred-rendering"><a href="#Hybrid-deferred-rendering" class="headerlink" title="Hybrid deferred rendering"></a>Hybrid deferred rendering</h3><p>为了解决<code>Deferred lighting</code>里面的<strong>第一个弊端</strong>，从CE3的某个版本开始，换成了这种方式。理由是，对于大多数物体来说，<code>Deferred rendering</code>的方式就很好了，而对于特殊材质，则使用<code>Deferred lighting</code>的方式。这样，既能保持很好的渲染效果，又能避免渲染批次激增。</p>
<p>更详细的内容可见 <a target="_blank" rel="noopener" href="http://www.marries.nl/wordpress/wp-content/uploads/2013/05/Hybrid-Deferred-Rendering.pdf">Hybrid-Deferred-Rendering.pdf</a></p>
<h2 id="Forward"><a href="#Forward" class="headerlink" title="Forward+"></a>Forward+</h2><p><em>有时候，你转了很大一个圈以后，发现又回到了原点。</em></p>
<p>好，那这就到了终极方式了——<code>前向着色</code>的改进版。这个方案是ATI（著名显卡生产商，06年被AMD收购）发明的，已经应用于Ogre 2.1（开源的面向对象的3D引擎）。UE4（大名鼎鼎的虚幻引擎）正在针对VR研发前向着色，不知道是不是也是这个。</p>
<p>原理也很简单：</p>
<ul>
<li><p>先用<code>Tile-based deferred rendering</code>里的方式计算好每个区域受哪些光照影响</p>
</li>
<li><p>然后像传统的前向着色一样渲染每个mesh——当然，要去光照列表里查找影响当前区域的所有光照，并着色</p>
</li>
</ul>
<p>这种方式只有上述提到的一个缺点，那就是可能和<code>Deferred lighting</code>一样需要渲染两遍场景，不过以后应该会有优化的方案。优点则有：</p>
<ul>
<li><p>渲染效果好</p>
</li>
<li><p>带宽开销低，尤其适用于VR这种每帧需要渲染两遍场景的应用</p>
</li>
<li><p>可以使用硬件支持的MSAA，质量最高。</p>
</li>
</ul>
<p>Forward+的优势还有很多，其实大多就是传统 Forward Rendering 本身的优势，所以 Forward+更像一个集各种 Rendering Path 优势于一体的 Rendering Path。</p>
<blockquote>
<p><code>Forward+ = Forward + Light Culling</code>。Forward+ 很类似 Tiled-based Deferred Rendering。 其具体做法就是先对输入的场景进行 z-prepass，也就是说关闭写入 color，只向 z-buffer 写入 z 值。注意<em>此步骤是 Forward+必须的</em>，而其他渲染方式是可选的。接下来的步骤和 TBDR 很类似，都是划分 tiles，并计算 bounding box。只不过 TBDR 是在 G-Buffer 中完成这一步骤 的，而 Forward+是根据 Z-Buffer。最后一步其实使用的是 <em>Forward rendering</em> 方式，即在 FS 阶段对每个 pixel 根据其所在 tile 的 light 序列计算光照效果。而 TBDR 使用的是基于 G-Buffer 的 <em>Deferred rendering</em>。</p>
<p>实际上，forward+比 deferred 运行的更快。我们可以看出由于 Forward+只要写深度缓存 就可以，而 <em>Deferred Rendering</em> 除了深度缓存，还要写入法向缓存。而在 <code>Light Culling</code> 步骤， Forward+只需要计算出哪些 light 对该 tile 有影响即可。而 <em>Deferred Rendering</em> 还在这一部分把光照处理给做了。而这一部分，Forward+是放在 Shading 阶段做的。所以 Shading 阶段 Forward+ 耗费更多时间。但是对目前硬件来说，Shading 耗费的时间没有那么多。</p>
</blockquote>
<p>以下是 <em>Forward+</em> 与 <em>Deferred Rendering</em> 的对比图：</p>
<p><img src="https://user-gold-cdn.xitu.io/2019/3/10/169658ebc6294411?w=1436&amp;h=690&amp;f=jpeg&amp;s=136905" alt="Forward+ vs Deferred Rendering"></p>
<p>感兴趣的可以再额外看看 <a target="_blank" rel="noopener" href="http://www.klayge.org/2012/04/21/forward%E6%A1%86%E6%9E%B6%E7%9A%84%E9%80%86%E8%A2%AD%EF%BC%9A%E8%A7%A3%E6%9E%90forward%E6%B8%B2%E6%9F%93/">forward框架的逆袭：解析forward渲染</a> 这篇文章。</p>
<blockquote>
<p><strong>名词解释</strong></p>
<p>Light Culling：剔除光照</p>
</blockquote>
<h1 id="渲染-游戏引擎调查"><a href="#渲染-游戏引擎调查" class="headerlink" title="渲染/游戏引擎调查"></a>渲染/游戏引擎调查</h1><p>渲染引擎属于游戏引擎中的一部分，本章节主要简要整理一下找到的一些渲染引擎和游戏引擎，具体内在区别后续进一步深入了解的时候再整理补上。</p>
<h2 id="渲染引擎"><a href="#渲染引擎" class="headerlink" title="渲染引擎"></a>渲染引擎</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/bkaradzic/bgfx">bgfx</a></li>
<li><a target="_blank" rel="noopener" href="https://www.ogre3d.org/">OGRE 3D</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/openscenegraph/OpenSceneGraph">osg</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/ConfettiFX/The-Forge">The Forge</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/gameknife/gkEngine">gkEngine</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/mrdoob/three.js/">three.js</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/pixijs/pixi.js">pixi.js</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/alibaba/G3D">g3d</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/openscenegraph/OpenSceneGraph">OpenSceneGraph</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/jagenjo/litescene.js">LiteScene</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/jagenjo/webglstudio.js">webglstudio.js</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/soulwire/sketch.js/">sketch.js</a></li>
<li><a target="_blank" rel="noopener" href="https://playcanvas.com/">PlayCanvas</a></li>
</ul>
<h2 id="游戏引擎"><a href="#游戏引擎" class="headerlink" title="游戏引擎"></a>游戏引擎</h2><ul>
<li><a target="_blank" rel="noopener" href="https://unity3d.com/cn?_ga=2.81811670.1139994982.1544154612-1333628586.1544154612">Unity3D</a></li>
<li><a target="_blank" rel="noopener" href="https://www.unrealengine.com/zh-CN/what-is-unreal-engine-4">Unreal</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/urho3d/Urho3D">Urho3D</a></li>
<li><a target="_blank" rel="noopener" href="https://www.cocos.com/">cocos</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/godotengine/godot">godot</a></li>
</ul>
<p>在Wiki上也已经有整理了目前为止市面上已有的大量游戏引擎：<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Game_engine">Game Engine</a></p>
<p>Github上统计的开源游戏引擎：<a target="_blank" rel="noopener" href="https://github.com/collections/game-engines">game-engines</a></p>
<h1 id="参考引擎"><a href="#参考引擎" class="headerlink" title="参考引擎"></a>参考引擎</h1><p>通过上面的调查我们发现现在市面上的大小引擎数不胜数，一个个地去看的话时间周期估计要以年为单位，首先我们要先从自身的需求出发定出一些对参考引擎所需要具备的特性的要求，然后再根据要求来筛选出几个比较贴合我们需求的深入研究。</p>
<p>以我自身的角度出发，我列出来了以下一些要求：</p>
<ul>
<li>开源，但是项目规模还未到非常庞大的程度，避免研究周期过长</li>
<li>具备一定规模的使用人数和影响力</li>
<li>保持更新，所用方案不至于落后行业太久</li>
<li>使用C++语言编写，具备跨平台特性</li>
<li>支持2D/3D渲染，实现粒子系统、光源、动画系统、后处理等多项功能中的几种</li>
<li>具备多平台自动切换渲染驱动的话更好</li>
</ul>
<p>我从上面调查后的引擎列表里整理出了以下几个符合语言、使用人数、持续更新、支持效果等方面都比较符合的引擎来优先作为研究的对象，后续的分析系列文章也会先以这些引擎来作为目标：</p>
<ul>
<li><p>渲染引擎</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://github.com/bkaradzic/bgfx">bgfx</a><ul>
<li>可实现2D以及文字绘制，3D渲染，光照等效果</li>
<li>可自动切换Metal等渲染驱动</li>
</ul>
</li>
<li><a target="_blank" rel="noopener" href="https://www.ogre3d.org/">OGRE 3D</a><ul>
<li>老牌渲染引擎，除了渲染之外还包含动画系统和粒子系统</li>
</ul>
</li>
<li><a target="_blank" rel="noopener" href="https://github.com/openscenegraph/OpenSceneGraph">OpenSceneGraph</a><ul>
<li>中文文档，粒子系统等功能可通过第三方插件实现</li>
</ul>
</li>
</ul>
</li>
<li><p>游戏引擎</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://github.com/godotengine/godot">godot</a><ul>
<li>用的人多，中文文档，2D和3D都支持</li>
<li><a target="_blank" rel="noopener" href="https://www.slant.co/topics/3964/~best-3d-c-game-engines-with-full-source-code-access">What are the best 3D C++ game engines with full source code access?</a>：外网评价的截止2019最佳游戏引擎，下面的GoDot排第二，第一是Unreal</li>
</ul>
</li>
<li><a target="_blank" rel="noopener" href="https://github.com/urho3d/Urho3D">Urho3D</a><ul>
<li>历史久远使用人数比Godot少很多，各方面表现比较中庸</li>
<li>轻量级项目，支持在该引擎的基础上方便地扩展各种效果组件</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>至此我们完成了在迈出跨平台渲染引擎第一步之前的铺垫工作，我们梳理了渲染引擎的一个大致流程，以及这个流程里面的关于 <em>Rendering path</em> 等方面的细节信息，对这些内容有了一个初步的印象，同时列举了以下令人望而却步的技能树，但是我们可以一步一步地吃成胖子，重要地是迈出这第一步，最后我们整理了一下渲染/游戏引擎列表，并按照自身要求从中梳理了几个引擎来作为下一步分析研究的目标。</p>
<hr>
<p><strong>版权声明</strong></p>
<p><img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gee6wkfo69j30e9026gm4.jpg" alt="Creative Commons BY-NC-ND 4.0 International License"></p>
<p><a target="_blank" rel="noopener" href="http://linbinghe.me/">Lam’s Blog</a> by <a target="_blank" rel="noopener" href="http://linbinghe.me/">Binghe Lin</a> is licensed under a <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-ND 4.0 International License</a>.<br>由<a target="_blank" rel="noopener" href="http://linbinghe.me/">林炳河</a>创作并维护的<a target="_blank" rel="noopener" href="http://linbinghe.me/">Lam’s Blog</a>采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">创作共用保留署名-非商业-禁止演绎4.0国际许可证</a>。</p>
<p>本文首发于<a target="_blank" rel="noopener" href="http://linbinghe.me/">Lam’s Blog - Knowledeg as Action</a>，版权所有，侵权必究。</p>
<p>本文永久链接：<a target="_blank" rel="noopener" href="http://codinglife.me/2020/cf6289c2.html">http://codinglife.me/2020/cf6289c2.html</a></p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E8%B7%A8%E5%B9%B3%E5%8F%B0/" rel="tag"># 跨平台</a>
              <a href="/tags/%E6%B8%B2%E6%9F%93%E5%BC%95%E6%93%8E/" rel="tag"># 渲染引擎</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2018/4fc970d4.html" rel="prev" title="【OpenGL-ES】模型变换与坐标系统">
                  <i class="fa fa-chevron-left"></i> 【OpenGL-ES】模型变换与坐标系统
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2020/cf6289c2.html" rel="next" title="跨平台渲染引擎之路：bgfx分析">
                  跨平台渲染引擎之路：bgfx分析 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">LinBinghe</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  






  





</body>
</html>
